<template>
    <div class="sub-aside">
        <div class="search-bar">
            <div class="search-box" v-if="showSearch">
                <el-select v-model="searchValue" multiple filterable remote reserve-keyword placeholder="搜索用户..." :remote-method="searchMethod"
                    :loading="searchLoading" @on-change="optionChange">
                    <el-option v-for="(option, index) in searchList" :value="option" :key="index" :label="option[searchKey]"></el-option>
                </el-select>
                <i class="icon i-search"></i>
            </div>
            <div class="search-box" v-else></div>
            <span class="add" @click="add">
                <i class="icon i-plus"></i>
            </span>
        </div>
        <div class="sub-nav">
            <tree-view :model="treeData" @on-selected="treeSelected" @on-toggle-expand="getOrgLevel" @on-dropdown-expand="dropdownExpand"
                @on-dropdown-click="dropdownClick"></tree-view>
        </div>
    </div>
</template>
<script>
    import TreeView from '@/components/treeview/tree';
    import { transTreeData } from '@/utils';
    export default {
        name: 'SystemTree', // 系统管理树结构
        data() {
            return {
                searchLoading: false,
                searchValue: '',
                searchList: [],
                orgTreeData: []
            }
        },
        components: {
            TreeView
        },
        computed: {
            // 0：用户,1：角色,2：架构
            pageType() {
                return this.$store.state.system.pageType;
            },
            showSearch() {
                if (this.pageType === 0) {
                    return true
                }
                else if (this.pageType === 1) {
                    return false;
                }
                else if (this.pageType === 2) {
                    return true;
                }
            },
            treeData() {
                let _treeData = [];
                if (this.pageType === 0) {
                    _treeData = this.$store.getters.getDeptList;
                }
                else if (this.pageType === 1) {
                    _treeData = this.$store.getters.getRoleList;
                }
                else if (this.pageType === 2) {
                    _treeData = this.$store.state.system.orgList;
                    // return this.orgTreeData;
                }
                return _treeData;
            },
            searchKey() {
                let _key = 'name';
                if (this.pageType === 0) {
                    _key = 'name';
                }
                else if (this.pageType === 1) {
                    _key = '';
                }
                else if (this.pageType === 2) {
                    _key = 'userName';
                }
                return _key;
            },
            changeOrgValue() {
                return this.$store.state.system.changeOrgValue;
            }
        },
        mounted() {
            if (this.pageType == 0) {
                if (this.$store.getters.getDeptList && this.$store.getters.getDeptList.length == 0) {
                    this.$store.dispatch('getDeptList');
                }
            }
            else if (this.pageType == 1) {
                if (this.$store.getters.getRoleList && this.$store.getters.getRoleList.length == 0) {
                    this.$store.dispatch('getRoleList');
                }
            }
            else if (this.pageType == 2) {
                if (this.$store.state.system.orgList && this.$store.state.system.orgList.length == 0) {
                    this.getOrgLevel(0)
                }
            }
        },
        methods: {
            searchMethod(val) {
                if (val !== '') {
                    this.searchLoading = true;
                    setTimeout(() => {
                        let param = {
                            data: {
                                pageSize: 100,
                                pageIndex: 1
                            },
                            callback: (data) => {
                                this.searchLoading = false;
                                this.searchList = data.list;
                            }
                        }
                        let _action = '';
                        // 用户
                        if (this.pageType == 0) {
                            param.data.name = val;
                            _action = 'getUserList';
                        }
                        // 角色
                        else if (this.pageType == 1) {
                            _action = '';
                        }
                        // 架构
                        else if (this.pageType == 2) {
                            param.data.userName = val;
                            _action = 'getOrgUserList';
                        }
                        if (_action) {
                            this.$store.dispatch(_action, param);
                        }
                    }, 200);
                } else {
                    this.searchList = [];
                }
            },
            optionChange(value) {
                let _path = '';
                if (this.pageType === 0) {
                    _path = 'usermanage';
                }
                else if (this.pageType === 1) {
                    _path = 'rolemanage';
                }
                else if (this.pageType === 2) {
                    _path = 'orgmanage';
                }
                this.$router.push('/' + _path + '/detail?id=' + value.id);
            },
            add() {
                this.$emit('on-plus');
            },
            treeSelected(data) {
                this.$emit('on-selected', data);
            },
            dropdownExpand(data) {
                this.$emit('on-dropdown-expand', data);
            },
            dropdownClick(index) {
                this.$emit('on-dropdown-click', index);
            },
            getOrgLevel(model) {
                var _this = this;
                var _param = {
                    data: {
                        parentCode: model == 0 ? 0 : model.deptCode
                    },
                    callback: function (data) {
                        if (data && data.length > 0) {
                            data.forEach(item => {
                                item.flag = false;
                                item.childs = [];
                                if (model == 0) {
                                    // _this.orgTreeData.push(item);
                                    _this.$store.state.system.orgList.push(item);
                                }
                                else {
                                    if (!model.flag) {
                                        model.childs.push(item);
                                    }
                                }
                            });
                            if (model !== 0) {
                                model.flag = true;
                            }
                        }
                        else {
                            model.empty = true;
                        }
                    }
                }
                if (model == 0) {
                    this.$store.dispatch('queryOrgList', _param);
                }
                else {
                    // 没有下一级
                    if (model.empty) {
                        return;
                    }
                    else {
                        // 子级数据已经加载了，不用重新加载
                        if (!(model.childs && model.childs.length)) {
                            this.$store.dispatch('queryOrgList', _param);
                        }
                    }
                }

            }
        },
        watch: {
            changeOrgValue() {
                this.orgTreeData = [];
                this.getOrgLevel(0);
            }
        }
    };
</script>